<template>
  <div>
    <el-form :model="editedStore" :rules="rules" ref="storeForm">
      <el-form-item label="店铺名称" prop="Sname">
        <el-input v-model="editedStore.Sname" placeholder="请输入店铺名称"></el-input>
      </el-form-item>
      <el-form-item label="店铺销量" prop="sales">
        <el-input v-model.number="editedStore.sales" :readonly="true" type="number"  placeholder="请输入店铺销量"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="updateStore">确 定</el-button>


    </span>
  </div>
</template>

<script>
import axios from 'axios'; // 导入 axios
import { cloneDeep } from 'lodash'; // 引入 lodash 的深拷贝方法

export default {
  name: 'Edit',
  props: {
    dialogVisible: Boolean,
    store: Object,
  },
  data() {
    return {
      editedStore: cloneDeep(this.store), // 使用深拷贝创建 store 的副本
      rules: {
        Sname: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        sales: [
          { required: true, message: '请输入店铺销量', trigger: 'blur' },
          { type: 'number', message: '销量必须为数字', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    // 取消操作
    cancel() {
      this.$refs.storeForm.resetFields(); // 重置表单
      this.$emit('update:dialogVisible', false); // 关闭对话框
    },

    // 更新店铺信息
    updateStore() {
      this.$refs.storeForm.validate((valid) => {
        if (valid) {
          console.log('更新店铺信息:', this.editedStore);

          // 调用 API 更新店铺
          axios.put('http://localhost:21371/api/Store', this.editedStore)
            .then(() => {
              // 更新成功，关闭对话框并通知父组件刷新数据
              this.$emit('update:dialogVisible', false);
              this.$emit('refresh');
            })
            .catch((error) => {
              console.error('更新店铺失败:', error);
            });
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>
